<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<body>
    <!-- 用户仪表盘片段 -->
    <div th:fragment="dashboard" class="user-dashboard">
        <!-- 快速操作栏 -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card bg-light">
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <h5 class="mb-1">
                                    <span th:text="${#authentication.name}">用户</span>，欢迎回来！
                                </h5>
                                <p class="text-muted mb-0">今天是 <span th:text="${#temporals.format(#temporals.createNow(), 'yyyy年MM月dd日')}">2024年01月01日</span></p>
                            </div>
                            <div class="col-md-4 text-end">
                                <div class="btn-group" role="group">
                                    <a th:href="@{/meals}" class="btn btn-primary">
                                        <i class="fas fa-utensils me-1"></i>开始点餐
                                    </a>
                                    <a th:href="@{/nutrition/dashboard}" class="btn btn-outline-primary">
                                        <i class="fas fa-chart-line me-1"></i>营养详情
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 营养进度概览 -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="fas fa-tachometer-alt me-2"></i>今日营养进度
                        </h5>
                        <div class="d-flex align-items-center">
                            <i id="alert-icon" class="fas fa-check-circle text-success me-2"></i>
                            <span class="badge bg-danger" id="alert-badge" style="display: none;">0</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <!-- 卡路里 -->
                            <div class="col-lg-3 col-md-6 mb-3">
                                <div class="nutrition-item">
                                    <div class="d-flex align-items-center mb-2">
                                        <i class="fas fa-fire text-danger me-2"></i>
                                        <span class="fw-bold">卡路里</span>
                                    </div>
                                    <div class="progress mb-2" style="height: 8px;">
                                        <div id="calories-progress" class="progress-bar bg-danger" 
                                             role="progressbar" style="width: 0%" 
                                             aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                                        </div>
                                    </div>
                                    <small id="calories-text" class="text-muted">0 / 0 kcal</small>
                                </div>
                            </div>

                            <!-- 蛋白质 -->
                            <div class="col-lg-3 col-md-6 mb-3">
                                <div class="nutrition-item">
                                    <div class="d-flex align-items-center mb-2">
                                        <i class="fas fa-drumstick-bite text-warning me-2"></i>
                                        <span class="fw-bold">蛋白质</span>
                                    </div>
                                    <div class="progress mb-2" style="height: 8px;">
                                        <div id="protein-progress" class="progress-bar bg-warning" 
                                             role="progressbar" style="width: 0%" 
                                             aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                                        </div>
                                    </div>
                                    <small id="protein-text" class="text-muted">0 / 0 g</small>
                                </div>
                            </div>

                            <!-- 碳水化合物 -->
                            <div class="col-lg-3 col-md-6 mb-3">
                                <div class="nutrition-item">
                                    <div class="d-flex align-items-center mb-2">
                                        <i class="fas fa-bread-slice text-info me-2"></i>
                                        <span class="fw-bold">碳水化合物</span>
                                    </div>
                                    <div class="progress mb-2" style="height: 8px;">
                                        <div id="carbs-progress" class="progress-bar bg-info" 
                                             role="progressbar" style="width: 0%" 
                                             aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                                        </div>
                                    </div>
                                    <small id="carbs-text" class="text-muted">0 / 0 g</small>
                                </div>
                            </div>

                            <!-- 脂肪 -->
                            <div class="col-lg-3 col-md-6 mb-3">
                                <div class="nutrition-item">
                                    <div class="d-flex align-items-center mb-2">
                                        <i class="fas fa-tint text-success me-2"></i>
                                        <span class="fw-bold">脂肪</span>
                                    </div>
                                    <div class="progress mb-2" style="height: 8px;">
                                        <div id="fat-progress" class="progress-bar bg-success" 
                                             role="progressbar" style="width: 0%" 
                                             aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                                        </div>
                                    </div>
                                    <small id="fat-text" class="text-muted">0 / 0 g</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 三餐面板 -->
        <div class="row mb-4">
            <div class="col-12">
                <h4 class="mb-3">
                    <i class="fas fa-clock me-2"></i>今日三餐
                </h4>
            </div>
            
            <!-- 早餐 -->
            <div class="col-lg-4 col-md-6 mb-3">
                <div class="card meal-card h-100">
                    <div class="card-header bg-warning text-dark d-flex justify-content-between align-items-center">
                        <h6 class="mb-0">
                            <i class="fas fa-sun me-2"></i>早餐
                        </h6>
                        <span class="badge bg-light text-dark">7:00-10:00</span>
                    </div>
                    <div class="card-body">
                        <div id="breakfast-content" class="meal-content">
                            <div class="text-center text-muted py-3">
                                <i class="fas fa-utensils fa-2x mb-2"></i>
                                <p class="mb-0">还没有点早餐</p>
                            </div>
                        </div>
                        <div class="mt-3">
                            <a th:href="@{/meals/breakfast}" class="btn btn-warning w-100">
                                <i class="fas fa-plus me-1"></i>点早餐
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 午餐 -->
            <div class="col-lg-4 col-md-6 mb-3">
                <div class="card meal-card h-100">
                    <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                        <h6 class="mb-0">
                            <i class="fas fa-sun me-2"></i>午餐
                        </h6>
                        <span class="badge bg-light text-dark">11:00-14:00</span>
                    </div>
                    <div class="card-body">
                        <div id="lunch-content" class="meal-content">
                            <div class="text-center text-muted py-3">
                                <i class="fas fa-utensils fa-2x mb-2"></i>
                                <p class="mb-0">还没有点午餐</p>
                            </div>
                        </div>
                        <div class="mt-3">
                            <a th:href="@{/meals/lunch}" class="btn btn-primary w-100">
                                <i class="fas fa-plus me-1"></i>点午餐
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 晚餐 -->
            <div class="col-lg-4 col-md-6 mb-3">
                <div class="card meal-card h-100">
                    <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
                        <h6 class="mb-0">
                            <i class="fas fa-moon me-2"></i>晚餐
                        </h6>
                        <span class="badge bg-light text-dark">17:00-20:00</span>
                    </div>
                    <div class="card-body">
                        <div id="dinner-content" class="meal-content">
                            <div class="text-center text-muted py-3">
                                <i class="fas fa-utensils fa-2x mb-2"></i>
                                <p class="mb-0">还没有点晚餐</p>
                            </div>
                        </div>
                        <div class="mt-3">
                            <a th:href="@{/meals/dinner}" class="btn btn-success w-100">
                                <i class="fas fa-plus me-1"></i>点晚餐
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 智能推荐 -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="fas fa-magic me-2"></i>智能推荐
                        </h5>
                        <button class="btn btn-outline-primary btn-sm" onclick="refreshRecommendations()">
                            <i class="fas fa-sync-alt me-1"></i>刷新
                        </button>
                    </div>
                    <div class="card-body">
                        <div id="recommendations-content" class="row">
                            <!-- 推荐内容将通过JavaScript动态加载 -->
                            <div class="col-12 text-center py-4">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="visually-hidden">加载中...</span>
                                </div>
                                <p class="mt-2 text-muted">正在为您生成个性化推荐...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 快速统计 -->
        <div class="row">
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="card text-center h-100">
                    <div class="card-body">
                        <i class="fas fa-calendar-day text-primary fa-2x mb-2"></i>
                        <h5 class="card-title">连续打卡</h5>
                        <h3 class="text-primary" id="consecutive-days">0</h3>
                        <small class="text-muted">天</small>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="card text-center h-100">
                    <div class="card-body">
                        <i class="fas fa-utensils text-success fa-2x mb-2"></i>
                        <h5 class="card-title">总点餐次数</h5>
                        <h3 class="text-success" id="total-orders">0</h3>
                        <small class="text-muted">次</small>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="card text-center h-100">
                    <div class="card-body">
                        <i class="fas fa-heart text-danger fa-2x mb-2"></i>
                        <h5 class="card-title">喜爱菜品</h5>
                        <h3 class="text-danger" id="favorite-dishes">0</h3>
                        <small class="text-muted">道</small>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="card text-center h-100">
                    <div class="card-body">
                        <i class="fas fa-trophy text-warning fa-2x mb-2"></i>
                        <h5 class="card-title">营养达标</h5>
                        <h3 class="text-warning" id="goal-achievement">0</h3>
                        <small class="text-muted">%</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
